<template>
  <div class="writeComment">
    <!-- 默认显示部分 -->
    <div class="default_display">
      <input type="text" :value="message" @focus="isShow = true" />
      <div class="pinglun">
        <span class="iconfont iconpinglun-"></span>
        <div class="number">102</div>
      </div>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
    <!-- 默认隐藏部分 -->
    <van-popup v-model="isShow" position="bottom">
      <van-field
        v-model="message"
        rows="4"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请写评论"
        show-word-limit
      />
      <div class="send" @click="sendComment">发送</div>
    </van-popup>
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  data() {
    return {
      isShow: false,
      message: "",
      commentId: "",
    };
  },
  created() {
    //保证之前有的其他页面监听删除掉
    eventBus.$off("replyComment");
    eventBus.$on("replyComment", (commentId) => {
      // console.log("回调函数");
      this.commentId = commentId;
      this.isShow = true;
    });
  },
  methods: {
    sendComment() {
      this.$axios({
        method: "post",
        url: "/post_comment/" + this.$route.query.id,
        data: {
          content: this.message,
          parent_id: this.commentId,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.message == "评论发布成功") {
          this.isShow = false;
          // this.$router.go(0);
          // location.reload();
          this.message = "";
          this.commentId = "";
          this.$emit("reload");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.writeComment {
  background-color: #f1f1f1;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .default_display {
    display: flex;
    align-items: center;
    justify-content: space-around;
    // margin: 3/360 * 100vw 0;
    padding: 10px 0;
    input {
      width: 180/360 * 100vw;
      height: 30/360 * 100vw;
      border-radius: 15/360 * 100vw;
      background-color: #e4e4e4;
      text-indent: 15px;
      border: none;
      outline: none;
      font-size: 15/360 * 100vw;
    }
    .pinglun {
      position: relative;
      .iconpinglun- {
        font-size: 35/360 * 100vw;
      }
      .number {
        position: absolute;
        top: -4px;
        left: 7px;
        background-color: red;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 9px;
        color: #fff;
      }
    }
    .iconfenxiang,
    .iconshoucang {
      font-size: 30/360 * 100vw;
    }
  }
  .van-popup--bottom {
    .send {
      position: absolute;
      right: 69px;
      bottom: 9px;
      padding: 3px 15px;
      font-size: 13px;
      border-radius: 13/360 * 100vw;
      background: red;
      color: #fff;
    }
  }
}
</style>